<template>
  <div>
        <el-input
      size="mini"
      v-model="search"
      @change.native="searchSpend"
      style="margin-top: 5px"
      placeholder="请输入订单号搜索"
    >
    </el-input>
    <br /><br />
    <el-button @click="exportExcel"> 导出 Excel </el-button>
    <el-table height="700" ref="table" :data="tableData" style="width: 100%">
      <el-table-column label="订单ID" prop="orderNo"> </el-table-column>
      <el-table-column label="订单描述" prop="tradeDesc"> </el-table-column>
      <el-table-column label="交易日期" prop="tradeCreateDate"> </el-table-column>
      <el-table-column label="总价" prop="tradeMoney"> </el-table-column>
      <el-table-column label="付款学生" prop="fromName"> </el-table-column>
      <el-table-column align="right">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="danger"
            v-if="userInfo.role === 'admin'"
            @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-row style="margin-top: 10px">
      <el-col>
        <el-pagination
          :small="small"
          @current-change="pageCurrentChange"
          @prev-click="pagePrevClick"
          @next-click="pageNextClick"
          background
          :page-size="12"
          layout="prev, pager, next"
          :total="count"
        >
        </el-pagination>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { nanoid } from "nanoid";
import { isMobile } from "@/util/util";

import {
  useGetOrderCount,
  useDeleteOrder,
  useGetOrders,
} from "@/hooks/order";

import { mapState } from "vuex";

export default {
  name: "AccountSpend",
  inject: ["app"],
  data() {
    return {
      small: false,
      tableData: [],
      search: "",
      count: 0,
    };
  },
  computed: {
    ...mapState("user", ["userInfo"]),
  },
  mounted() {
    this.small = isMobile();
    (async () => {
      this.count = (await useGetOrderCount()).data?.count;
      this.tableData = (await useGetOrders()).data?.order.map((c)=>{
          c.tradeCreateDate = new Date(c.tradeCreateDate).toLocaleDateString();
          c.tradeType = c.tradeType === 1 ? '转账' : '其他费用'
          c.tradePayStatus = c.tradePayStatus === 0 ? '未支付' : c.tradePayStatus === 1 ? '已过期' : '已支付' 
          return c;
      });
    })();
  },
  watch: {
    $route: {
      handler(route) {
        if (route.name === "accountSpend") {
          (async () => {
            this.count = (await useGetOrderCount()).data?.count;
            this.tableData = (await useGetOrders()).data?.order;
          })();
        }
      },
      deep: true,
    },
  },
  methods: {
    async searchSpend() {
      this.commonGetTableData();
    },
    handleDelete(index, row) {
      this.$confirm("此操作将永久删除该订单, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          const { _id } = row;
          const resInfo = await useDeleteOrder(_id);
          // 此处可以做更详细的判断 我就省略了......
          this.$message.success("删除成功!");
          this.commonGetTableData();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    async commonGetTableData(currentPage) {
      const resInfo = await useGetOrders(
        this.search ? this.search : null,
        currentPage ? currentPage : null
      );
      if (resInfo.code === 201 && resInfo.message === "success") {
        this.tableData = resInfo.data.order;
      } else {
        this.tableData = [];
        this.$message.error(resInfo.message);
      }
    },
    async pageCurrentChange(currentPage) {
      this.app.$refs["main"].$el.scrollTo(0, 0);
      this.commonGetTableData(currentPage);
    },
    async pagePrevClick(currentPage) {
      this.commonGetTableData(currentPage);
    },
    async pageNextClick(currentPage) {
      this.commonGetTableData(currentPage);
    },
  },
};
</script>

<style lang="scss" scoped></style>
